<template>
  <lay-container fluid="true" style="padding: 10px">
    <lay-row :space="10">
      <lay-col :md="24">
        <lay-card>
          <lay-table :page="page" :columns="columns" :dataSource="dataSource" :default-toolbar="defaultToolbar"
            v-model:selectedKeys="selectedKeys" @change="change" :size="tablesize">
            <template v-slot:toolbar>
              <lay-button type="primary" size="sm" @click="add" v-permission="PerKey.UserGroup_AddOrEditView">新增
              </lay-button>
            </template>
            <template v-slot:operator="{ data }">
              <lay-button-group>
                <lay-button type="primary" size="sm" @click="edit(data.id)"
                  v-permission="PerKey.UserGroup_AddOrEditView">编辑
                </lay-button>
                <lay-button type="danger" size="sm" @click="del(data)" v-permission="PerKey.UserGroup_Delete">删除
                </lay-button>
              </lay-button-group>
            </template>
          </lay-table>
        </lay-card>
      </lay-col>
    </lay-row>

    <lay-layer :title="addoredittip" v-model="modelVisible" resize="true" :area="['1000px','850px']">
      <lay-card style="padding:10px;">
        <lay-row space="10">
          <lay-form :model="form">
            <lay-col :md="24">
              <lay-form-item label="角色名称" prop="groupname" required required-error-message="角色名称不能空">
                <lay-col md="12">
                  <lay-input v-model="form.groupname"></lay-input>
                </lay-col>
              </lay-form-item>
              <lay-field title="权限分配">
                <lay-col md="24">
                  <lay-col md="12">
                    <lay-form-item label="系统及统计">
                      <lay-col md="24">
                        <lay-checkbox-group v-model="form.systemrole">
                          <lay-checkbox :value="PerKey.Config_Index">设置查看</lay-checkbox>
                          <lay-checkbox :value="PerKey.Config_Edit">设置编辑</lay-checkbox>
                          <lay-checkbox :value="PerKey.Statistics_Index">统计</lay-checkbox>
                        </lay-checkbox-group>
                      </lay-col>
                    </lay-form-item>
                  </lay-col>
                  <lay-col md="12">
                    <lay-form-item label="上传">
                      <lay-col md="24">
                        <lay-checkbox-group v-model="form.systemrole">
                          <lay-checkbox :value="PerKey.Upload_Upload">上传</lay-checkbox>
                          <lay-checkbox :value="PerKey.Attment_Index">列表</lay-checkbox>
                          <lay-checkbox :value="PerKey.Attment_Delete">删除</lay-checkbox>
                        </lay-checkbox-group>
                      </lay-col>
                    </lay-form-item>
                  </lay-col>
                </lay-col>
                <lay-col md="24">
                  <lay-col md="12">
                    <lay-form-item label="日志及缓存">
                      <lay-col md="24">
                        <lay-checkbox-group v-model="form.systemrole">
                          <lay-checkbox :value="PerKey.Log_Index">日志</lay-checkbox>
                          <lay-checkbox :value="PerKey.Log_Clear">清除</lay-checkbox>
                          <lay-checkbox :value="PerKey.Cache_Index">缓存管理</lay-checkbox>
                        </lay-checkbox-group>
                      </lay-col>
                    </lay-form-item>
                  </lay-col>
                  <lay-col md="12">
                    <lay-form-item label="内部消息">
                      <lay-col md="24">
                        <lay-checkbox-group v-model="form.systemrole">
                          <lay-checkbox :value="PerKey.Notice_Index">列表</lay-checkbox>
                          <lay-checkbox :value="PerKey.Notice_AddOrEdit">发送</lay-checkbox>
                          <lay-checkbox :value="PerKey.Notice_Delete">删除</lay-checkbox>
                        </lay-checkbox-group>
                      </lay-col>
                    </lay-form-item>
                  </lay-col>
                </lay-col>
                <lay-field title="用户相关"></lay-field>
                <lay-form-item label="部门管理">
                  <lay-col md="20">
                    <lay-checkbox-group v-model="form.systemrole">
                      <lay-checkbox :value="PerKey.UserDept_Index">列表</lay-checkbox>
                      <lay-checkbox :value="PerKey.UserDept_AddOrEditView">查看增改</lay-checkbox>
                      <lay-checkbox :value="PerKey.UserDept_AddOrEdit">增改</lay-checkbox>
                      <lay-checkbox :value="PerKey.UserDept_Delete">删除</lay-checkbox>
                    </lay-checkbox-group>
                  </lay-col>
                </lay-form-item>

                <lay-form-item label="岗位管理">
                  <lay-col md="20">
                    <lay-checkbox-group v-model="form.systemrole">
                      <lay-checkbox :value="PerKey.UserPost_Index">列表</lay-checkbox>
                      <lay-checkbox :value="PerKey.UserPost_AddOrEditView">查看增改</lay-checkbox>
                      <lay-checkbox :value="PerKey.UserPost_AddOrEdit">增改</lay-checkbox>
                      <lay-checkbox :value="PerKey.UserPost_Delete">删除</lay-checkbox>
                    </lay-checkbox-group>
                  </lay-col>
                </lay-form-item>

                <lay-form-item label="角色管理">
                  <lay-col md="20">
                    <lay-checkbox-group v-model="form.systemrole">
                      <lay-checkbox :value="PerKey.UserGroup_Index">列表</lay-checkbox>
                      <lay-checkbox :value="PerKey.UserGroup_AddOrEditView">查看增改</lay-checkbox>
                      <lay-checkbox :value="PerKey.UserGroup_AddOrEdit">增改</lay-checkbox>
                      <lay-checkbox :value="PerKey.UserGroup_Delete">删除</lay-checkbox>
                    </lay-checkbox-group>
                  </lay-col>
                </lay-form-item>
                <lay-form-item label="用户管理">
                  <lay-col md="24">
                    <lay-checkbox-group v-model="form.systemrole">
                      <lay-checkbox :value="PerKey.User_Index">列表</lay-checkbox>
                      <lay-checkbox :value="PerKey.User_AddOrEditView">查看增改</lay-checkbox>
                      <lay-checkbox :value="PerKey.User_AddOrEdit">增改</lay-checkbox>
                      <lay-checkbox :value="PerKey.User_Delete">删除</lay-checkbox>
                      <lay-checkbox :value="PerKey.User_UserChange">查看个人信息</lay-checkbox>
                      <lay-checkbox :value="PerKey.User_UserChangeEdit">修改个人信息</lay-checkbox>
                    </lay-checkbox-group>
                  </lay-col>
                </lay-form-item>
                <lay-field title="网站管理"></lay-field>
                <lay-form-item label="栏目管理">
                  <lay-col md="20">
                    <lay-checkbox-group v-model="form.systemrole">
                      <lay-checkbox :value="PerKey.ContentCate_Index">列表</lay-checkbox>
                      <lay-checkbox :value="PerKey.ContentCate_AddOrEditView">查看增改</lay-checkbox>
                      <lay-checkbox :value="PerKey.ContentCate_AddOrEdit">增改</lay-checkbox>
                      <lay-checkbox :value="PerKey.ContentCate_Delete">删除</lay-checkbox>
                    </lay-checkbox-group>
                  </lay-col>
                </lay-form-item>
                <lay-form-item label="内容管理">
                  <lay-col md="20">
                    <lay-checkbox-group v-model="form.systemrole">
                      <lay-checkbox :value="PerKey.Content_Index">列表</lay-checkbox>
                      <lay-checkbox :value="PerKey.Content_AddOrEditView">增改查看</lay-checkbox>
                      <lay-checkbox :value="PerKey.Content_AddOrEdit">增改提交</lay-checkbox>
                      <lay-checkbox :value="PerKey.Content_Delete">删除</lay-checkbox>
                      <lay-checkbox :value="PerKey.Content_Status">属性</lay-checkbox>
                    </lay-checkbox-group>
                  </lay-col>
                </lay-form-item>
              </lay-field>
              <lay-form-item>
                <lay-button @click="submitClick" type="primary" v-permission="PerKey.UserGroup_AddOrEdit">
                  {{addoredittip}}
                </lay-button>
              </lay-form-item>

            </lay-col>
          </lay-form>
        </lay-row>
      </lay-card>

    </lay-layer>


  </lay-container>
</template>
  
<script lang="ts" setup>
import { reactive, ref, toRefs, watch } from "vue";
import { layer } from "@layui/layer-vue";
import { getList, delOne, getEdit, putEdit, postAdd } from "../../../api/module/user/usergroup";
import { PerKey } from "../../../library/permissionConst"
import { UserGroup } from '../../../types/user'
const selectedKeys = ref(["1"]);
const defaultToolbar = ref(true);
const page = ref({ total: 0, limit: 10, current: 1, showRefresh: true, });
const tablesize = ref('md');

const columns = [
  {
    title: "Id",
    width: "50px",
    key: "id"
  }, {
    title: "用户组",
    width: "220px",
    key: "groupname",
  },
  {
    title: "操作",
    customSlot: "operator",
    key: "operator",
    align: "left",
  }
]
const dataSource = ref([])

const GetList = function (current = page.value.current, limit = page.value.limit) {
  getList(current, limit).then((res) => {
    if (res.status == 1) {
      //console.log(res)
      dataSource.value = res.data
      page.value.total = res.count
    }
  })
}

const change = function ({ current, limit }: any) {
  GetList(current, limit);
};


const edit = function (id: number) {
  changeVisible(id)
}
const add = function () {
  changeVisible(0)
}

const del = function (data: any) {
  layer.confirm("确认删除ID: " + data.id + data.groupname + " 角色", {
    title: "警告", move: "true", shade: "false", shadeClose: "true",
    btn: [{
      text: '确认', callback: (layerId: number) => {
        delOne(data.id).then((res) => {
          if (res.status == 1) {            
            layer.msg(res.msg, { time: 1000, icon: 1 },()=>{
              GetList()
            });
          } else {
            layer.msg(res.msg);
          }
          layer.close(layerId);
        })
      }
    }, {
      text: '取消', callback: function (layerId: number) {
        layer.close(layerId);
      }
    }]
  })
}


const modelVisible = ref(false)
const data = reactive({
  form: <UserGroup><unknown>[]
})

const { form } = toRefs(data)

let addoredittip = ref();

const changeVisible = function (id: number) {
  modelVisible.value = !modelVisible.value
  if (id == 0) {
    addoredittip.value = "新增角色";
    form.value = {
      id: 0,
      groupname: "",
      systemrole: "",
    }
    return
  } else {
    addoredittip.value = "编辑角色";
    getEdit(id).then((res) => {
      if (res.status == 1) {
        let data = res.data
        let sysrole = data.systemrole == null ? "[\"Home_Index\"]" : data.systemrole;
        form.value = data
        form.value.systemrole = JSON.parse(sysrole)
      }
    })
    return
  }
}

const submitClick = function () {
  if (!form.value.groupname) {
    layer.msg("角色名称不能空")
    return
  }
  form.value.systemrole = JSON.stringify(form.value.systemrole)

  if (form.value.id == 0) {
    postAdd(form.value).then((res) => {
      done(res)
    });
  } else {
    putEdit(form.value).then((res) => {
      done(res)
    });
  }
};
const done = (res: any) => {
  if (res.status == 1) {
    layer.msg(res.msg, { time: 1000, icon: 1 }, () => {
      modelVisible.value = !modelVisible.value
      GetList()
    });
  } else {
    layer.msg(res.msg, { icon: 2 });
    return false;
  }
}
GetList()
</script>
   
<style scoped>
.tip {
  color: gray;
  line-height: 38px;
  height: inherit;
  padding-left: 10px;
}
</style>